<template>
  <div>
    <illnessDetails
        v-if="illnessShow"
        :illnessData="illnessData"
        :detailsShow="illnessShow"
        :defaultDate="timeParams"
        @noDetails="noDetails"/>
    <div class="illnessSurplus" v-if="!illnessShow">
      <c-navigation>
        <c-time @change="timeChangeHandler"/>
      </c-navigation>
      <div class="illnessMain">
        <p>
          <RadioGroup :title="'病组'"
                      :allLength="allLength"
                      :surplusLength="surplusLength"
                      :overspendLength="overspendLength"
                      @listChange="listChange">

          </RadioGroup>
          <span class="seeDetail" @click="toDetail">查看各病组收费构成＞</span>
        </p>
        <div class="moneyTabs">
          <div :class="['leftMoney',moneyActive==''?'moneyActive':'']" @click="moneyClick('')">
            <div class="pMain">
              <p :style="groupResultsData.disFee>0?'':'color:#E00703'">
                {{ groupResultsData.disFee || 0 }}<span> 万元</span></p>
              <div>总结余</div>
            </div>
          </div>
          <div class="rightMoney">
            <div :class="moneyActive==1?'moneyActive':''" @click="moneyClick(1)">
              <div class="pMain">
                <p>{{ groupResultsData.rw1Fee || 0 }}<span> 元</span></p>
                <div>RW＜0.5</div>
              </div>
            </div>
            <div :class="moneyActive==2?'moneyActive':''" @click="moneyClick(2)">
              <div class="pMain">
                <p>{{ groupResultsData.rw2Fee || 0 }}<span> 元</span></p>
                <div>0.5RW＜1</div>
              </div>
            </div>
            <div :class="moneyActive==3?'moneyActive':''" @click="moneyClick(3)">
              <div class="pMain">
                <p>{{ groupResultsData.rw3Fee || 0 }}<span> 元</span></p>
                <div>1≤RW＜1.5</div>
              </div>
            </div>
            <div :class="moneyActive==4?'moneyActive':''" @click="moneyClick(4)">
              <div class="pMain">
                <p>{{ groupResultsData.rw4Fee || 0 }}<span> 元</span></p>
                <div>1.5≤RW＜2</div>
              </div>
            </div>
            <div :class="moneyActive==5?'moneyActive':''" @click="moneyClick(5)">
              <div class="pMain">
                <p>{{ groupResultsData.rw5Fee || 0 }}<span> 元</span></p>
                <div>2≤RW＜3</div>
              </div>
            </div>
            <div :class="moneyActive==6?'moneyActive':''" @click="moneyClick(6)">
              <div class="pMain">
                <p>{{ groupResultsData.rw6Fee || 0 }}<span> 元</span></p>
                <div>RW≥3</div>
              </div>
            </div>
          </div>
        </div>
        <a-table class="custom"
                 :columns="columns"
                 :data-source="listData"
                 :pagination="{total:total,pageSize:pageSize}"
                 @change="tableChange" :rowKey="record=>record['diseaseCode']">
          <div class="index" slot="diseaseCode" slot-scope="record, item,index">
            <span type="text" style="margin-right: 10px;color: #6190F7;cursor: pointer"
                  @click="seedetail(item)">查看详情</span>
          </div>
        </a-table>
      </div>
      <illMark v-if="markShow" :defaultDate="timeParams" @markClose="markClose"></illMark>
    </div>
  </div>
</template>

<script>
import RadioGroup from '@/components/radioGroup.vue'
import {list, GroupCount, GroupResults} from "@/api/illnessSurplus";
import illMark from '@/components/illMark.vue'
import illnessDetails from './illnessDetails.vue'
import columns from "./columns.js";
import moment from "moment";

export default {
  name: "illnessSurplus",
  components: {
    RadioGroup,
    illMark,
    illnessDetails
  },
  data() {
    return {
      listData: [],
      columns: [],
      markShow: false,
      illnessShow: false,
      moneyActive: 0,
      timeParams: {
        year: moment().format('YYYY'),
        month: moment().format('MM')
      },
      allLength: null,
      surplusLength: null,
      overspendLength: null,
      groupResultsData: [],
      flag: 0,
      rw: null,
      illnessData: null,
      total: 1,
      pageSize: 7,
      pageNum: 1,
    }
  },
  created() {
    this.columns = columns
  },
  mounted() {
    this.getGroupCount()
    this.getGroupResults()
    this.getList()
  },
  methods: {
    async getGroupCount() {
      const params = {...this.timeParams};
      const res = await GroupCount(params);
      if (res['data']) {
        this.allLength = res['data'].allCount || 0;
        this.surplusLength = res['data'].freeCount || 0;
        this.overspendLength = res['data'].overCount || 0;
      }
    },
    async getGroupResults() {
      const params = {...this.timeParams, flag: this.flag};
      const res = await GroupResults(params);
      console.log(res)
      if (res['data']) {
        console.log(res.data)
        this.groupResultsData = res['data']
      }
    },
    async getList() {
      const params = {...this.timeParams, flag: this.flag, rw: this.rw, pageSize: this.pageSize, pageNum: this.pageNum};
      const res = await list(params);
      console.log(res)
      if (res['data']) {
        console.log(res.data)
        this.total = res['data'].total
        this.listData = res['data']['list']
        //this.groupResultsData=res['data']
      }
    },
    tableChange(e) {
      this.pageNum = e.current
      this.getList()
    },
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getList()
      this.getGroupCount()
      this.getGroupResults()
    },
    listChange(e) {
      console.log(e)
      if (e == 1) {
        this.flag = 0
      } else if (e == 2) {
        this.flag = 1
      } else if (e == 3) {
        this.flag = -1
      }
      this.getGroupResults()
      this.getList()
    },
    seedetail(e) {
      this.illnessShow = true;
      this.illnessData = e;
      //this.$router.push({
      //path: '/illnessDetails',
      //name: 'illnessDetails',
      //})
    },
    toDetail() {
      this.markShow = true
    },
    markClose: function (e) {
      this.markShow = e
    },
    moneyClick(e) {
      this.moneyActive = e
      this.rw = e
      this.getList()
    },
    noDetails(e) {
      this.illnessShow = false
    },
  }
}
</script>

<style lang="stylus" scoped>
.illnessMain {
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(25, 25, 26, 0.15), 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 12px;
  margin-top 20px;
}

.seeDetail {
  cursor pointer
  font-family: PingFangSC-Medium;
  font-size: 12px;
  color: #4B82FB;
  text-align: right;
  float right
}

.moneyTabs {
  display: flex;
  margin-top 45px;
  margin-bottom 30px;
}

.moneyTabs > div {
  background: #FFFFFF;
  text-align center;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 8px;
  height: 120px;
}

.moneyTabs .moneyActive {
  border-top: 8px solid #407CFC;
  color: #407CFC
}

.pMain {
  display: inline-block;
  text-align left;
  padding 30px 0 34px 0;
}

.pMain p {
  font-size: 28px;
  line-height: 28px;
  margin-bottom 2px;
}

.pMain div {
  font-size: 14px;
  line-height: 14px;
}

.pMain p span {
  font-size: 14px;
}

.pMain .redMoney {
  font-size: 28px;
  color: #E00703;
  line-height: 28px;
}

.pMain .blueTitle {
  font-size: 14px;
  color: #4B82FB;
  line-height: 14px;
}

.leftMoney {
  flex: 1 1 280px;
  margin-right 20px;
  border-radius: 8px;
  border-top: 8px solid #fff;
}

.rightMoney {
  flex: 1 1 1340px;
  display flex;
  color: #9295AF;
}

.rightMoney > div {
  flex: 0 0 16.66%;
  border-radius: 8px;
  border-top: 8px solid #fff;
  cursor: pointer;
}
</style>
